<template>
  <div style="margin-top: 108px;">
    <h1 style="text-align: center;margin-bottom: 20px;color:#FFF;font-size: 50px">反馈中心</h1>
    <!-- <el-divider style="width: 80%;margin: 20px auto;border-top: 2px solid #FFF"></el-divider> -->
    <el-row>
      <el-col :span="2"></el-col>
      <el-col :span="20">
        <el-collapse accordion>
          <el-collapse-item title="常见问题" name="1">
            <h3 style="text-align: center; margin: 20px auto">
                疫苗和免疫的常见问题
              </h3>
              <h4>1、为什么接种疫苗？</h4>
              <p>
                接种疫苗的两个主要理由是要保护我们自己和我们周围的人。但不是每个人都能接种疫苗，例如年幼的婴儿、重病患者或某些过敏症患者不能接种疫苗，必须依赖其他人接种疫苗来确保他们不会感染疫苗可预防的疾病。
              </p>
              <h4>2、疫苗里有什么？</h4>
              <p>
                疫苗的所有成分都发挥着重要作用以确保疫苗安全有效。这些成分中包括:
              </p>
              <p>
              <ol >
                <li>
                 &nbsp;&nbsp;&nbsp;*抗原。这是一种灭活或减弱形式的病毒或细菌，它训练我们的身体识别疾病，以便未来遇到时能加以对抗。
                </li>
                <li>
                  &nbsp;&nbsp;&nbsp;*佐剂，有助于增强我们的免疫反应。换言之，它们有助于疫苗更好地发挥作用。
                </li>
                <li>&nbsp;&nbsp;&nbsp;*防腐剂，可确保维持疫苗的效力。</li>
                <li>&nbsp;&nbsp;&nbsp;*稳定剂，可在储存和运输过程中保护疫苗。</li>
              </ol>
              </p>
              <p>
                标签上列出的疫苗成分可能令人觉得陌生。然而，疫苗中使用的许多成分都天然存在于人体、环境和我们的食物中。疫苗中的所有成分，以及疫苗本身，都经过全面检验和监测，以确保其安全性。
              </p>
              <h4>3、疫苗有副作用吗？</h4>
              <p>
                 像任何药物一样，疫苗会引起轻微的副作用，如低烧、注射部位疼痛或发红。温和的反应会在几天内自行消失。 严重或持久的副作用极其罕见。对疫苗的安全性应进行持续监测，以发现罕见的不良事件。
              </p>
          </el-collapse-item>
          <el-collapse-item title="接种须知" name="2">
           <h3 style="color: #fff;text-align: center">疫苗打完禁忌症和注意事项</h3>
              <h4>
                1.接种后留观
              </h4>
              <p>
                接种 肺炎疫苗有引起严重不良反应的可能，因此接种
                肺炎疫苗后最好在接种现场观察至少30分钟，如果30分钟内没有异常现象则可正常离开，30分钟内出现任何异常均应联系医生或接种人员。
              </p>
              <h4>
                2.注意饮食
              </h4>
              <p>
                建议清淡饮食、多喝水。资料显示，接种
                肺炎疫苗后一周内应避免进食辛辣刺激食物及海鲜类食物，避免饮用含有乙醇成分的饮品。
              </p>
              <h4>
                3.注意局部卫生
              </h4>
              <p>
                接种
                肺炎疫苗者在接种后当日应避免注射部位沾水并注意局部卫生，以防皮肤感染。
              </p>
              <h4>
               4.注意过敏原
              </h4>
              <p>
                避免接触个人既往已知过敏物及常见过敏原（宠物毛发、尘螨、花粉等）。
              </p>
              <h4>
                5.不要剧烈运动
              </h4>
              <p>
                如跑步、打球、大运动量器械健身等等。若身体不适，建议及时前往医院就诊。
              </p>
          </el-collapse-item>
          <el-collapse-item title="预约流程" name="3">
           <el-steps :active="1" align-center>
              <el-step
                title="第一步"
                description="填写个人信息，确认个人信息"
              />
              <el-step title="第二步" description="选择疫苗，填写预约信息" />
              <el-step title="第三步" description="确认无误后提交" />
              <el-step
                title="第四步"
                description="预约信息可以在个人中心和预约信息菜单栏下查看"
              />
            </el-steps>
          </el-collapse-item>
          <el-collapse-item title="安全隐私" name="4">
            <h3 style="text-align: center; margin: 20px auto">提示条款：</h3>
              <p>
                您的信任对我们非常重要，我们深知个人信息对您的重要性，我们将按法律法规要求，采取相应安全保护措施，尽力保护您的个人信息安全可控。鉴此，我们制定本政策并提醒您：
              </p>
              <p>
                本政策适用于此网站产品或服务。需要特别说明的是，
                本政策不适用于其他第三方向您提供的服务。
              </p>
              <p>
                您使用或继续使用我们的服务，即意味着同意我们按照本《隐私政策》收集、使用、储存和分享您的相关信息。
              </p>
              <p>如对本政策或相关事宜有任何问题，请通过客服与我们联系。</p>
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <el-col :span="2"></el-col>
    </el-row>
    <div class="theend">
      <div class="endproblem">没有找到答案？ 或接种疫苗仍有问题？</div>
      <el-button type="primary" class="endbut" @click="addmessage"
        >联系反馈</el-button
      >
    </div>
  </div>
  <!-- 添加反馈的弹窗 -->
  <el-dialog title="反馈帮助" v-model="dialogFormVisible" width="50%">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="身份证号" label-width="100px" v-if="!isLogin">
        <el-input v-model="ruleForm.userid"></el-input>
      </el-form-item>
      <el-form-item label="反馈信息" label-width="100px" prop="themessage">
        <el-input v-model="ruleForm.message"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" label-width="100px" prop="thetime">
        <el-date-picker
          v-model="ruleForm.submittime"
          type="datetime"
          placeholder="选择日期和时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消</el-button>
        <el-button type="primary" @click="saveData('ruleForm')">
          确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus';
export default {
  name: 'Backhelp',
  data() {
    return {
      ruleForm: {
        userid: '',
        message: '',
        submittime: '',
      }, //添加反馈信息的数据
      isLogin: !!localStorage.getItem('token'),
      dialogFormVisible: false, //信息弹出框是否展示
      rules: {
        message: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        time: [{ required: true, message: '请选择时间', trigger: 'change' }],
      },
    };
  },
  methods: {
    // 添加
    addmessage() {
      this.form = {};
      this.dialogFormVisible = true;
    },
    //用于数据的添加和更新
    saveData() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http
            .post('/inoculations/feedback/save', this.ruleForm)
            .then((res) => {
              if (res.statusCode == '200') {
                ElMessage({
                  message: '成功！',
                  type: 'success',
                });
                this.dialogFormVisible = false;
                this.form = '';
              }
            })
            .catch(() => {
              ElMessage.error('失败！');
            });
        } else {
          ElMessage({
            message: '请填写！',
            type: 'warning',
          });
          return false;
        }
      });
    },
  },
};
</script>

<style>
.custom-tabs-label {
  text-align: center;
  color: #fff;
}
.el-tabs__item {
  line-height: 35px;
}
.el-tabs {
  --el-tabs-header-height: 100px;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
  font-size: 48px;
}
.theend {
  text-align: center;
  color: #fff;
}
.endproblem {
  font-size: 25px;
  margin-top: 100px;
}
.endbut {
  margin-top: 50px;
}
.textitem p {
  text-indent: 2em;
  font-size: 16px;
  line-height: 28px;
  display: -webkit-box;
}
.textitem {
  color: #fff;
}
.el-step__title.is-finish {
  color: #87cef0;
}
.el-step__description.is-finish {
  color: #87cef0;
}
.el-step__title.is-process {
  color: #d6d6d6;
}
.el-step__description.is-process {
  color: #d6d6d6;
}
.el-step__title.is-wait {
  color: #ffffff;
}
.el-step__description.is-wait {
  color: #ffffff;
}
.el-collapse-item__header {
  background-color: transparent;
  color: #fff;
  justify-content: center;
  font-size: 30px;
}
.el-collapse-item__wrap {
    background-color: transparent;
    color: #fff;
}
.el-collapse-item__wrap p {
  text-indent:24px;
}
.el-collapse-item__content {
    color: #fff;
}
.el-collapse-item__arrow {
    margin:0;
}
</style>
